import React, { useEffect, useState } from 'react';
import { Dispatch, history } from 'umi';
import { IResponse } from '@/models/connect';
import { Col, Layout, Menu, Row } from 'antd';
import { FileTextOutlined, FundOutlined, DoubleLeftOutlined } from '@ant-design/icons';
import Board from '@/pages/Analysis/Board';
import Datasheet from '@/pages/Analysis/Datasheet';
import styles from './index.less';
import { queryProjectList } from '@/services/project';
import { IProject } from '@/pages/data';

const { Content, Sider } = Layout;

interface UserProps {
  dispatch: Dispatch;
  submitting?: boolean;
}

const Analysis: React.FC<UserProps> = (props: any) => {
    const { id } = props.match.params;
    const [key, setKey] = useState<string>(id !== undefined && id !== '' ? id : 'board');
    const [projects, setProjects] = useState<IProject[]>([]);
    const [projectId, setProjectId] = useState<number>(0);
    const component = {
      // analysis: <AnalysisList projectId={projectId}/>,
      board: <Board projectId={projectId} />,
      datasheet: <Datasheet projectId={projectId} />,
      // datasource: <Datasource projectId={projectId}/>,
      // widgetList: <WidgetList projectId={projectId}/>,
    };

    const content = component[key];
    useEffect(() => {
      queryProjectList().then((res: IResponse) => {
        if (res.header.code === 200) {
          setProjects(res.payload);
        }
      });
    }, []);
    useEffect(() => {
      if (props.location.query && props.location.query.projectId) {
        setProjectId(Number(props.location.query.projectId));
      } else {
        setProjectId(0);
      }
    }, [props.location.query]);
    // 页面路由跳转
    const jump = (key: string) => {
      setKey(key);
      let url;
      if (key === 'analysis') {
        url = `/analysis`;
      } else {
        url = `/analysis/${key}?projectId=${projectId}`;
      }
      history.push(`${url}`);

    };

    const projectRender = (
      <div className={styles.projectList}>
        <Row gutter={[16, 16]} style={{ width: '100%', height: '134px' }}>
          {
            projects.map(value => {
              return (
                <Col span={6} key={value.id}>
                  <div className={styles.projectItem} onClick={() => {
                    history.push(`/analysis?projectId=${value.id}`);
                  }}>
                    {value.name}
                  </div>
                </Col>
              );
            })
          }

        </Row>
      </div>
    );
    const contain = (
      <>
        <div onClick={() => history.push(`/analysis`)}>
          <DoubleLeftOutlined />
          回到项目
        </div>
        <Layout style={{ background: '#fff', height: 'calc(100vh - 84px)', overflow: 'hidden' }}>
          <Sider width={146}>

            <Menu
              mode='inline'
              selectedKeys={[key]}
              style={{ height: '100%' }}
              onClick={(e) => jump(String(e.key))}
            >
              <Menu.Item key='board'>
                <FundOutlined style={{ marginRight: '5px' }} />
                看板管理
              </Menu.Item>
              <Menu.Item key='datasheet'>
                <FileTextOutlined style={{ marginRight: '5px' }} />
                数据表
              </Menu.Item>
            </Menu>
          </Sider>
          <Content>{content}</Content>
        </Layout>
      </>

    );
    return projectId === 0 ? projectRender : contain;
  }
;

export default Analysis;
